<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js懒加载</title>
</head>

<body>
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image1.jfif">
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image2.jfif">
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image3.jfif">
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image4.jfif">
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image5.jfif">
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image6.jfif">
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image7.jfif">
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image8.jfif">
    <img src="./image/懒加载/load.jfif" data-src="./image/懒加载/image9.jfif">
</body>
<style>
    img {
        display: block;
        width: 300px;
        height: 300px;
    }
</style>
<script>
    let imgLength = document.getElementsByTagName('img').length
    let img = document.getElementsByTagName('img')
    let screeHright = document.documentElement.clientHeight
    let n = 0

    function layzLoad() {
        let scrollTop =  document.documentElement.scrollTop
        for (let i = n; i < imgLength; i++) {
            if (img[i].offsetTop < screeHright + scrollTop) {
                if (img[i].getAttribute('src') === './image/懒加载/load.jfif') {
                    img[i].src = img[i].getAttribute('data-src')
                }
                n++
            }
        }
    }

    layzLoad()
    window.onscroll = layzLoad

</script>

</html>